<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/jquery-ui.min.css">
    <link rel="stylesheet" href="css/perfect-scrollbar.min.css">
    <link rel="stylesheet" href="js/vis.css">
    <link rel="stylesheet" href="css/jsPlumbToolkit-demo.css">
    <link rel="stylesheet" href="demo/draggableConnectors/index.css">

    <script src="js/jquery-2.1.4.min.js"></script>
    <script src="js/jquery-ui.min.js"></script>
    <script src="js/jquery.ui.touch-punch.min.js"></script>
    <script src="js/jquery.mousewheel.min.js"></script>
    <script src="js/perfect-scrollbar.jquery.min.js"></script>
    <script src="js/jsPlumb-2.0.7-min.js"></script>
    <link rel="stylesheet" href="js/vis.css">
    <script src="js/jsPlumb.js"></script>
    <!--<script src="js/vis.js"></script>-->
    <script src="js/echarts.js"></script>
    <script src="js/html2canvas.min.js"></script>
    <script src="js/index.js"></script>
</head>
<body>
<div class="view w_70 h">
    <div class="top h_10 cb">
        <select id="sel_linetype" class="fl mr5" style="width:80px;height:20px">
            　　　　
            <option value="1">直线</option>
            　　　　
            <option value="2">折线</option>
            　　　　
            <option value="3">曲线</option>
        </select>
        <div class="line fl">
            <ul>
                <li><span class="straight">直线</span></li>
                <li><span class="flowchart">折线</span></li>
                <li><span class="bezier">曲线</span></li>
            </ul>
        </div>
        <div class="screenshots">截图</div>
        <a id="theface" href="">下载截图</a>
    </div>
    <div class="left fl h_90 w_20">
        <ul>
            <li><span>空</span>
                <div class="window" id="dragDropWindow1">
                    <input type="text" value="标题">
                </div>
            </li>
            <li><span>柱状图</span>
                <div class="window" id="echart-bar" type="echart-bar"></div>
            </li>
            <li><span>饼图</span>
                <div class="window" id="echart-pie" type="echart-pie"></div>
            </li>
            <li><span>仪表盘</span>
                <div class="window" id="echart-gauge" type="echart-gauge"></div>
            </li>
            <li><span>表格</span>
                <div class="window" type="table" id="table">

                    <table class="tableTop">
                        <caption><span>应用：Iridium</span></caption>
                        <tr>
                            <td><span>区域</span></td>
                            <td><span>流入和流出</span></td>
                        </tr>
                    </table>
                    <div class="tableContent">
                        <table class="tableMain">
                            <tr>
                                <td><span>深圳</span></td>
                                <td><span>1MB</span></td>
                            </tr>
                            <tr>
                                <td><span>香港</span></td>
                                <td><span>2MB</span></td>
                            </tr>
                            <tr>
                                <td><span>深圳</span></td>
                                <td><span>1MB</span></td>
                            </tr>
                            <tr>
                                <td><span>香港</span></td>
                                <td><span>2MB</span></td>
                            </tr>
                            <tr>
                                <td><span>深圳</span></td>
                                <td><span>1MB</span></td>
                            </tr>
                            <tr>
                                <td><span>香港</span></td>
                                <td><span>2MB</span></td>
                            </tr>
                            <tr>
                                <td><span>其他</span></td>
                                <td><span>3MB</span></td>
                            </tr>
                        </table>
                    </div>


                </div>
            </li>
            <li><span>容器</span>
                <div class="container" id="container" type="container">
                    <div class="c-title"><input type="text" value="标题"></div>
                    <div class="c-content condrog"></div>
                </div>
            </li>
        </ul>
    </div>

    <div class="right connected fl h_90 w_80 drag-drop-demo" type="canvas" id="canvas"></div>

    <div class="_context" id="_context">
        <ul>
            <li class="menu connector _straight"><span>直线</span></li>
            <li class="menu connector _flowchart"><span>折线</span></li>
            <li class="menu connector _bezier"><span>曲线</span></li>
            <li class="menu connector _edit"><span>编辑</span></li>
            <li class="menu connector _delete"><span>删除</span></li>
            <li class="menu order _edit"><span>编辑</span></li>
            <li class="menu order _delete"><span>删除</span></li>
            <li class=" _close"><span>关闭</span></li>
        </ul>
    </div>
    <div class="_context" id="canvas_context">
        <ul>
            <li class="canvas_refresh"><span>刷新</span></li>
            <li class="canvas_sever"><span>保存</span></li>
            <li class="_close"><span>关闭</span></li>
        </ul>
    </div>
    <!--echart弹出层-->
    <div class="_context contextedit" id="echart_edit">
        <div class="head"><span>编辑</span></div>

        <select name="" id="echartValue">
            <option value="0">重传</option>
            <option value="1">重传（服）</option>
            <option value="2">重传（客）</option>
        </select>

        <div class="footer"><span class="submit">确认</span></div>
    </div>
    <!--线条弹出层-->
    <div class="_context contextedit" id="connector_edit">
        <div class="head"><span>编辑</span></div>
        <div class="footer"><span class="submit">确认</span></div>
    </div>
    <!--表格弹出层-->
    <div class="_context contextedit" id="table_edit">
        <div class="head"><span>编辑</span></div>

        <table class="content">
            <tr>
                <td><span>标题：</span></td>
                <td><input type="text" name="" id=""></td>
            </tr>
            <tr>
                <td><span>参数：</span></td>
                <td><select name="" id="tableValue">
                    <option value="0">重传</option>
                    <option value="1">重传（服）</option>
                    <option value="2">重传（客）</option>
                </select></td>
            </tr>
        </table>

        <div class="footer"><span class="submit">确认</span></div>
    </div>
    <!--容器弹出层-->
    <div class="_context contextedit" id="container_edit">
        <div class="head"><span>编辑</span></div>
        <div class="footer"><span class="submit">确认</span></div>
    </div>
</div>
</body>
</html>